<template>
    <el-dialog title="健康度" :visible.sync="isShow" width="70%" :lock-scroll="true" :show-close="false">
        <div class="box" ref="box1"></div>
    </el-dialog>
</template>

<script>
import * as echarts from 'echarts'
import { options } from './config'
export default {
    data() {
        return {
            isShow: false,
            chartData: [],
        }
    },
    methods: {
        doOpen(data) {
            this.chartData = data
            this.isShow = true
            this.draw()
        },
        draw() {
            this.$nextTick(() => {
                let ref = this.$refs.box1
                var myChart = echarts.init(ref)
                let arr = []
                let seriesData = []
                this.chartData.forEach((e2) => {
                    arr.push([e2.time, e2.health_grade])
                })
                seriesData.push({
                    data: arr,
                    type: 'line',
                    symbol: 'circle',
                    smooth: false,
                    symbolSize: 2,
                    connectNulls: false,
                    hoverAnimation: false,
                })
                this.options.xAxis.type = 'time'
                this.options.yAxis.name = '特征值'
                this.options.series = seriesData
                myChart.setOption(this.options)
                const chartObserver = new ResizeObserver(() => {
                    myChart.resize()
                })
                chartObserver.observe(ref)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            })
        },
    },
    created() {
        this.options = options
    },
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 60vh !important;
}
</style>
